/* eslint-disable quotes */
<template>
  <div class="page-step1">
    <div class="catelog-title">
      <h3 class="title">
        {{$t('productCenter.catelog')}}
        <i>*</i>
      </h3>
      <description messages="Select a catalog to add your product."></description>
    </div>
    <el-cascader
      :options="categoryList"
      :placeholder="$t('productCenter.selectCatelog')"
      :props="props"
      v-model="selCateId"
      filterable
    ></el-cascader>
    <bottom-btn @cancel="handleCancel" :nextName="$t('Next')" @next="next"></bottom-btn>
  </div>
</template>

<script>
// import { getTree } from '@/api/productMana'
import { mapGetters } from 'vuex'
import BottomBtn from '../../commons/BottomBtn'
import description from '../../commons/description'
export default {
  name: 'selectCatalog',
  props: ['model'],
  components: { BottomBtn, description },
  data () {
    return {
      isEdit: false,
      selCateId: [],
      categoryList: [],
      props: {
        value: 'id',
        label: 'text'
      }
      /*   webList: [{ value: '1', label: '一级汽车', level: 1, children: [{ value: '2', label: '二级汽车', level: 2 }] }],
        appList: [{ value: '2', label: 'app汽车', level: 1, children: [{ value: '3', label: 'app二级汽车', level: 2 }] }] */
    }
  },
  mounted () {
    this.changeSelect()
  },
  computed: {
    ...mapGetters(['lookupItems'])
  },
  methods: {
    // 编辑时，数据初始化
    initDatas (initDatas) {
      this.changeSelect()
      if (initDatas) {
        this.isEdit = true
        this.selCateId = initDatas.codeList
      }
    },
    // 选择catelog
    changeSelect () {
      // const self = this
      // getTree().then(response => {
      //   const data = response
      //   if (Number(data.code) === 1) {
      //     const obj = data.obj
      //     self.categoryList = obj
      //   } else {
      //     this.$confirm(self.$t(data.code), {
      //       confirmButtonText: this.$t('confirmOK'),
      //       showCancelButton: false
      //     })
      //   }
      // })
      //   .catch(error => {
      //     this.$confirm(error, {
      //       confirmbuttontext: this.$t('confirmOK'),
      //       showcancelbutton: false
      //     })
      //   })
    },
    // 下一步
    next () {
      if (this.selCateId.length === 0) {
        this.$confirm(this.$t('productCenter.selectCatelog'), {
          confirmButtonText: this.$t('confirmOK'),
          showCancelButton: false
        })
        return false
      }
      this.model.catalogId = this.selCateId.slice(-1)[0]
      this.$store.dispatch('setCate', this.model.catalogId)
      this.$emit('next', this.model)
    },
    // 取消
    handleCancel () {
      this.$emit('cancel')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.source {
  overflow-y: auto;
  height: 700px;
}
.page-step1 {
  margin-top: 50px;
  padding: 0 30px;
  .catelog-title {
    display: flex;
    align-items: center;
    h3 {
      margin-right: 10px;
      i {
        color: red;
      }
    }
  }
}
</style>
